/* ===== TED SUN KPI — v3 (no clipping, ref-like) ===== */
.ted-kpi-rings, .ted-kpi-rings * { box-sizing: border-box; }

.ted-kpi-rings .tedSun3 {
  --orb: 182px;
  --rayH: 62px;

  --purpleA:#7C3AED; --purpleB:#EC4899;
  --blueA:#2563EB;   --blueB:#06B6D4;
  --amberA:#F59E0B;  --amberB:#FACC15;

  width: 100%;
  max-width: 860px;
  padding: 22px 24px;
  border-radius: 28px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 46px rgba(15,23,42,.10);
  position: relative;
  overflow: visible; /* ключ: ничего не режем */
}

/* мягкая аура внутри карточки (без вылета за края) */
.ted-kpi-rings .tedSun3__bg {
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  overflow:hidden; /* фон клипуем, а контент/тени — нет */
}
.ted-kpi-rings .tedSun3__bg::before{
  content:"";
  position:absolute; inset:-40px;
  background:
    radial-gradient(closest-side, rgba(124,58,237,.18), transparent 65%),
    radial-gradient(closest-side, rgba(6,182,212,.14), transparent 62%),
    radial-gradient(closest-side, rgba(250,204,21,.14), transparent 62%);
  filter: blur(14px);
  opacity: .85;
}
.ted-kpi-rings .tedSun3__bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 18% 35%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 62%, rgba(255,255,255,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 30%, rgba(255,255,255,.35) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 55%, rgba(255,255,255,.28) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 42%, rgba(255,255,255,.22) 0 1px, transparent 2px);
  opacity: .55;
}

/* layout */
.ted-kpi-rings .tedSun3__layout{
  position: relative;
  min-height: 210px;
  padding-left: calc(var(--orb) + 18px); /* место под шар */
  display:flex;
  align-items:center;
}

/* ---------- ORB ---------- */
.ted-kpi-rings .tedOrb3{
  width: var(--orb);
  height: var(--orb);
  position:absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}
.ted-kpi-rings .tedOrb3__glow{
  position:absolute; inset:-22px;
  background: radial-gradient(closest-side,
    rgba(124,58,237,.22),
    rgba(6,182,212,.14),
    rgba(250,204,21,.14),
    transparent 72%);
  filter: blur(12px);
}
.ted-kpi-rings .tedOrb3__glass{
  position:absolute; inset:0; border-radius:999px;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.98), rgba(255,255,255,.68) 38%, rgba(255,255,255,.16) 74%, rgba(255,255,255,.10)),
    radial-gradient(circle at 72% 78%, rgba(124,58,237,.18), rgba(6,182,212,.12), rgba(245,158,11,.10), transparent 62%);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 22px 44px rgba(15,23,42,.12);
  overflow:hidden;
}
.ted-kpi-rings .tedOrb3__ring{
  position:absolute; inset:10px; border-radius:999px;
  border:2px solid rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.06);
}
.ted-kpi-rings .tedOrb3__shine{
  position:absolute;
  width: 64%; height: 64%;
  left: 10%; top: 10%;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%);
  opacity: .7;
  filter: blur(1px);
}
.ted-kpi-rings .tedOrb3__content{
  position:absolute; inset:0;
  display:grid; place-items:center;
  text-align:center;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:#0F172A;
}
.ted-kpi-rings .tedOrb3__num{
  font-weight: 950;
  font-size: 64px;
  line-height:1;
  letter-spacing:-.04em;
}
.ted-kpi-rings .tedOrb3__label{
  margin-top: 6px;
  font-weight: 850;
  font-size: 18px;
  color: rgba(15,23,42,.62);
}
.ted-kpi-rings .tedOrb3__sub{
  margin-top: 4px;
  font-weight: 650;
  font-size: 12px;
  color: rgba(15,23,42,.55);
}

/* ---------- RAYS ---------- */
.ted-kpi-rings .tedRays3{
  width: 100%;
  min-width: 0;
  display:flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 18px; /* лёгкая “посадка” за шар */
  position: relative;
  z-index: 2;
}

.ted-kpi-rings .tedRay3{
  height: var(--rayH);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: 0 14px 26px rgba(15,23,42,.12);
}

/* “носик” справа — внутри карточки, без вылета за границу */
.ted-kpi-rings .tedRay3::before{
  content:"";
  position:absolute;
  right:-26px; top:50%;
  width: 84px; height: 84px;
  transform: translateY(-50%) rotate(10deg);
  border-radius: 26px;
  background: inherit;
  opacity: .95;
}

/* глянец */
.ted-kpi-rings .tedRay3::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 60%),
    linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,0) 35%, rgba(255,255,255,.12));
  pointer-events:none;
}

/* градиенты */
.ted-kpi-rings .tedRay3--train { background: linear-gradient(90deg, var(--purpleA), var(--purpleB)); }
.ted-kpi-rings .tedRay3--level { background: linear-gradient(90deg, var(--blueA),   var(--blueB)); }
.ted-kpi-rings .tedRay3--lesson{ background: linear-gradient(90deg, var(--amberA),  var(--amberB)); }

/* контент */
.ted-kpi-rings .tedRay3__content{
  position:relative; z-index:2;
  height:100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 22px 0 14px;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:#fff;
  text-shadow: 0 1px 16px rgba(15,23,42,.22);
  min-width:0;
}

.ted-kpi-rings .tedRay3__left{
  display:flex; align-items:center; gap: 10px;
  min-width:0;
}
.ted-kpi-rings .tedRay3__icon{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  flex: 0 0 auto;
}
.ted-kpi-rings .tedRay3__title{
  font-weight: 850;
  font-size: 14px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  opacity: .96;
}
.ted-kpi-rings .tedRay3__right{
  display:flex; align-items:baseline; gap: 8px;
  flex: 0 0 auto;
}
.ted-kpi-rings .tedRay3__value{
  font-weight: 950;
  font-size: 34px;
  letter-spacing:-.02em;
  line-height:1;
}
.ted-kpi-rings .tedRay3__unit{
  font-weight: 850;
  font-size: 18px;
  opacity:.95;
  white-space: nowrap;
}

/* ===== animations ===== */
.ted-kpi-rings .tedSun3.is-ready .tedOrb3 { animation: tedOrbFloat 5.8s ease-in-out infinite; }
@keyframes tedOrbFloat{ 0%,100%{ transform: translateY(-50%) translateX(0); } 50%{ transform: translateY(-50%) translateX(0) translateY(-4px);} }

.ted-kpi-rings .tedSun3.is-ready .tedRay3{
  animation: tedRayIn .85s cubic-bezier(.2,.9,.2,1) both;
}
.ted-kpi-rings .tedSun3.is-ready .tedRay3--train { animation-delay: .05s; }
.ted-kpi-rings .tedSun3.is-ready .tedRay3--level { animation-delay: .12s; }
.ted-kpi-rings .tedSun3.is-ready .tedRay3--lesson{ animation-delay: .19s; }
@keyframes tedRayIn{ from{opacity:0; transform: translateX(-16px); filter: blur(2px);} to{opacity:1; transform: translateX(0); filter: blur(0);} }

.ted-kpi-rings .tedSun3.is-ready .tedRay3::after{ animation: tedShimmer 3.8s ease-in-out infinite; }
@keyframes tedShimmer{ 0%,100%{opacity:.60; transform: translateX(0);} 50%{opacity:.92; transform: translateX(10px);} }

/* responsive */
@media (max-width: 860px){
  .ted-kpi-rings .tedSun3{
    padding: 18px 16px;
  }
  .ted-kpi-rings .tedSun3__layout{
    padding-left: 0;
    display:block;
    min-height: auto;
  }
  .ted-kpi-rings .tedOrb3{
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    margin: 0 auto 14px;
  }
  .ted-kpi-rings .tedRays3{
    padding-left: 0;
  }
}